<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chart</title>
</head>
<body>
<div style="width: 400px;height: 400px;">
    <canvas id="myChart" width="400" height="300"></canvas>
</div>

<script src="https://cdn.bootcss.com/Chart.js/2.7.1/Chart.min.js"></script>
<script>
    var ctx = document.getElementById("myChart").getContext('2d');


    window.chartColors = {
        red: 'rgb(255, 99, 132)',
        orange: 'rgb(255, 159, 64)',
        yellow: 'rgb(255, 205, 86)',
        green: 'rgb(75, 192, 192)',
        blue: 'rgb(54, 162, 235)',
        purple: 'rgb(153, 102, 255)',
        grey: 'rgb(201, 203, 207)'
    }

    const data = {
        datasets: [{
            data: [10, 20, 30],
            backgroundColor: [
                window.chartColors.red,
                window.chartColors.yellow,
                window.chartColors.blue,
                window.chartColors.green,
            ]
        }],
        labels: [
            'A',
            'B',
            'C',
            'D',
            'E'
        ],


    }

    var myChart = new Chart(ctx, {
        type: 'pie',
        data: data,
        options: {
            legend: {
                display: false
            },
        },
    })
</script>
</body>
</html>